import React, { ReactNode, useState } from 'react'
import * as auth from '../authProvider'
import { Users } from '../screens/projectList/searchPannel'
import { useMount } from '../utils'
import { http } from '../utils/http'

interface AuthForm {
	username: string
	password: string
}

const bootstrapUser = async () => {
	let user = null
	const token = auth.getToken()
	if (token) {
		const data = await http('me', { token })
		user = data.user
	}
	return user
}

export const AuthProvider = ({ children }: { children: ReactNode }) => {
	const [user, setUser] = useState<Users | null>(null)

	// 函数式编程：point free
	const login = (form: AuthForm) => auth.login(form).then(setUser)
	const register = (form: AuthForm) => auth.register(form).then(setUser)
	const logout = () => auth.logout().then(() => setUser(null))

	useMount(() => {
		bootstrapUser().then(setUser)
	})

	return (
		<AuthContext.Provider
			children={children}
			value={{ user, login, register, logout }}
		/>
	)
}

const AuthContext = React.createContext<
	| {
			user: Users | null
			register: (form: AuthForm) => Promise<void>
			login: (form: AuthForm) => Promise<void>
			logout: () => Promise<void>
	  }
	| undefined
>(undefined)
AuthContext.displayName = 'AuthContext'

export const useAuth = () => {
	const context = React.useContext(AuthContext)
	if (!context) {
		throw new Error('useAuth必须在AuthProvider中使用')
	}
	return context
}
